<script setup>
import { ref, reactive, computed } from 'vue';
import { useTeacherStore } from '@/stores/modules/teacherStore';
import { useRouter } from 'vue-router';
import { reqPsychologyNoteUntreated } from '@/api/teacher/record/psychology';
import { reqLeaveNote } from '@/api/teacher/record/leave';
import { reqFileNote } from '@/api/teacher/record/file';
import {
    reqPublicClassManagerNote,
    reqPublicClassNote
} from '@/api/teacher/record/publicClass';
import { showFailToast } from 'vant';
import todoListItem from '@/component/todoListItem.vue';

const router = useRouter();

const teacherStore = useTeacherStore();

// 查看更多跳转的连接
const seeMore = ref('teacher-todo');

// li列表
const list = reactive([]);

// 公共教室预约申请列表
const publicClassroomList = reactive([]);

// 心理预约的申请列表
const psychologyList = reactive([]);

// 下拉加载
const load = () => {
    loading.value = true;
    loadTodoList();
};

// 是否显示加载中
const loading = ref(false);

// 是否提示todolist没有更多数据
const noMore = ref(false);

// 在加载时和没有数据的时候不能继续使用下拉加载
// (可以理解为在加载时和没多数据时不能使用load方法)
const disabled = computed(() => loading.value || noMore.value);

// 页数
let pageNo = 1;

// 请求代办事项
const loadTodoList = () => {
    const roleNums = teacherStore.roleNums;

    if (roleNums.includes(24)) {
        addHanlder(reqPsychologyNoteUntreated, psychologyList, '预约申请');
    } else if (roleNums.includes(41)) {
        // 直接写静态
        seeMore.value = 'inquire-stay';
        noMore.value = true;
        loading.value = false;
    } else if (roleNums.includes(46)) {
        addHanlder(reqFileNote, list, '档案预约申请');
    } else if (roleNums.includes(19)) {
        addHanlder(reqPsychologyNoteUntreated, psychologyList, '预约申请');
    } else if (roleNums.includes(18)) {
        addHanlder(reqPsychologyNoteUntreated, psychologyList, '预约申请');
    } else if (roleNums.includes(96)) {
        addHanlder(
            reqPublicClassManagerNote,
            publicClassroomList,
            '公共教室预约申请'
        );
    } else if (roleNums.includes(97)) {
        addHanlder(reqPublicClassNote, publicClassroomList, '公共教室预约申请');
    } else if (roleNums.includes(177)) {
        addHanlder(reqPublicClassNote, publicClassroomList, '公共教室预约申请');
    } else {
        addHanlder(reqLeaveNote, list, '');
    }

    pageNo++;
};

const addHanlder = async (req, list, setLeaveType) => {
    try {
        const result = await req(pageNo, 10);

        leaveType.value = setLeaveType;

        if (result.status == 200) {
            const dataList = result.dataList;

            if (dataList) {
                if (dataList.length < 5) {
                    noMore.value = true;
                }

                list.push(...dataList);
            } else {
                noMore.value = true;
            }
        } else if (result.statusText == '该用户无此方法的权限！') {
            noMore.value = true;
        } else {
            throw new Error(result.statusText);
        }
    } catch (e) {
        noMore.value = true;
        // showFailToast(e.message || '待办事项获取数据失败');
    }
    loading.value = false;
};

// leavetype 用于表示是哪个申请条
const leaveType = ref('');
</script>

<template>
    <div class="head">
        <div class="heading">
            待办事项
            <div class="count" v-if="list.length">{{ list.length }}</div>
        </div>
        <a class="more" @click="router.push({ name: seeMore })">查看更多>></a>
    </div>
    <ul
        class="todoList"
        v-infinite-scroll="load"
        :infinite-scroll-disabled="disabled"
        infinite-scroll-distance="10"
    >
        <todoListItem
            :list="list"
            :leaveType="leaveType"
            :psychologyList="psychologyList"
            :publicClassroomList="publicClassroomList"
        ></todoListItem>
        <div v-if="loading" class="loading" v-loading="loading"></div>
        <div v-if="noMore" class="no-more">没有更多数据了</div>
    </ul>
</template>

<style lang="scss" scoped>
.head {
    display: flex;
    justify-content: space-between;
    align-content: center;

    .heading {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18rem;
        font-weight: bold;

        .count {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 16rem;
            height: 16rem;
            border-radius: 10rem;
            color: white;
            background-color: rgb(255, 51, 51);
            font-size: 10rem;
            margin-left: 6rem;
        }
    }

    .more {
        display: flex;
        align-items: center;
        color: rgb(39, 114, 253);
        font-size: 13rem;
    }
}

.todoList {
    position: absolute;
    top: 18rem;
    left: 20rem;
    right: 20rem;
    bottom: 10rem;
    margin-top: 20rem;
    overflow: auto;
    padding-top: 5rem;

    .loading {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 10rem;
        font-size: large;
        margin-top: 20rem;
        background-color: #bbb;
    }

    .no-more {
        width: 100%;
        height: 10rem;
        margin-top: 20rem;
        font-size: 14rem;
        color: #999;
        text-align: center;
    }
}
</style>
